<template>
	<el-table :data="service_detail" style="margin-left:30px;margin-bottom: 20px;">
		<el-table-column property="label" label="服务信息" width="150" />
		<el-table-column property="value" label="" width="200" />
	</el-table>
	<el-form :model="param_form" label-width="120px" style="width: 80%;" v-if="param_form.length">
		<el-form-item label="输入参数值">
			<div v-for="n in param_form.length" style="width: 100%;">
				<el-input v-model="param_form[n - 1].value" style="width: 60%;margin-bottom: 10px;">
					<template #append> {{ param_form[n - 1].label }} </template>
				</el-input>
			</div>
		</el-form-item>
	</el-form>
	<el-button type="primary" @click="onSubmit" style="margin-left: 30px;">发送请求</el-button>
	<el-table :data="response" style="margin-left:30px" v-if="requested">
		<el-table-column v-for="(item, index) in response[0]" :key="index" :property="index" :label="index" width="150" />
	</el-table>
</template>
  
<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import { Success } from '../../util/message'
import { useService } from '../../stores/serviceStore';
import Api from '../../util/axios'

const service_detail = reactive<any[]>([])
const param_form = reactive<any[]>([])
let name = ''
onMounted(() => {
	let detail = useService().data
	name = detail['path']
	for (const key in detail) {
		if (key == 'name') service_detail.push({ label: '服务名称', value: detail[key] })
		else if (key == 'note') service_detail.push({ label: '服务描述', value: detail[key] })
		if (key == 'params') {
			let value = ''
			detail[key].forEach(element => {
				value += element['name'] + ' ' + element['type'] + ';'
				param_form.push({ name: element['name'], label: element['note'], type: element['type'], value: '' })
			});
			// service_detail.push({ label: key, value: value })
		}
		// else if (detail[key])
		// 	service_detail.push({ label: key, value: detail[key] })
	}
})

const response = reactive<any[]>([])
const requested = ref(false)
const onSubmit = () => {
	let params = {}
	param_form.forEach(element => {
		params[element.name] = element.value
	});
	Api.post('/use_api', {
		apiPath: name,
		sqlparams: params
	}).then((res: any) => {
		// console.log(res);
		Success('请求成功')
		if (typeof res.data == 'object') {
			response.push(...res.data)
			requested.value = true
		}
	})
}
</script>